<template>
	<view class="coun">
		<view class="czinput">
			<view class="lebox">
				测线条数：
			</view>
			<view class="">
				<view class="" style="width: 380rpx">
					<uni-data-select :disabled="true" :clear="false" v-model="ceXiantiaoshu" :localdata="range2"
						placeholder="请选择测线条数" @change="change2"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				测量方法：
			</view>
			<view class="">
				<view class="" style="width: 380rpx">
					<uni-data-select :disabled="true" :clear="false" v-model="ceDianshuliang" :localdata="range1"
						placeholder="请选择测点数量" @change="change1"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="topitem" v-for="(item,index) in listdata" :key="index">
			<view class="">
				<view class="ite" v-for="(i,index) in item" :key="index">
					<view class="bom">
						<!-- 测点{{index + 1}} -->
						{{i.name}}
					</view>
					<view class="top">
						<!-- 流速：{{i.dian}} -->
						<view style="width: 120rpx;">
							流速：
						</view>
						<view class="" style="width: 200rpx;">
							<u--input placeholder="请输入内容" border="surround" type="digit" v-model="i.input"></u--input>
						</view>
					</view>
				</view>
				<view class="ite">
					<view class="pjun">
						测线流速：{{item.aveTy}}
					</view>
				</view>
				<!-- 				<view class="ite">
					<view class="pjun">
						平均时间：{{item.time}}
					</view>
				</view> -->
			</view>
			<view class="" style="width: 1rpx;height: 150rpx;background-color: #dfdfdf;">

			</view>
			<view class="rite">
				<view class="rt">
					{{index + 1}}
				</view>
				<view class="rb">
					测线
				</view>
			</view>
		</view>
		<!-- <button @click="clijisu">计算</button> -->
		<view class="shuiinput">
			<text>渠道底宽：</text>
			<view class="" style="width: 440rpx;">
				<u--input placeholder="请输渠道底宽" type="digit" v-model="bw"></u--input>
			</view>

		</view>
		<view class="shuiinput">
			<text>流量系数：</text>
			<view class="" style="width: 440rpx;">
				<u--input placeholder="请输流量系数" type="digit" v-model="qk"></u--input>
			</view>

		</view>
		<view class="shuiinput">
			<text>输入水深：</text>
			<view class="" style="width: 440rpx;">
				<u--input placeholder="请输入水深" type="digit" v-model="wD"></u--input>
			</view>

		</view>
		<view class="liusliang">
			<text>等效流速：</text>
			<text class="text">{{channelArea}}</text>
		</view>
		<view class="liusliang">
			<text>平均流量：</text>
			<text class="text">{{liusliangnub}}</text>
		</view>
		<view class=""
			style="width: 690rpx;display: flex;justify-content: space-around;align-items: center;margin: 30rpx 0 50rpx 0;">
			<!-- 			<view class="" style="width: 300rpx;" @click="upyun(3)">
				<u-button color="#31ab7c" type="primary" shape="circle" text="上传到云"></u-button>
			</view> -->
			<view class="" style="width: 600rpx;">
				<u-button @click="calculateFlow" color="#5a9fa6" type="primary" shape="circle" text="开始计算"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cezhanInfo
	} from '@/common/cezhanlist.js';

	export default {
		data() {
			return {
				nuball: 0,
				arrnub: [],
				liusliangnub: 0,
				wD: 1,
				listdata: [],
				cezhanObj: {},
				range1: [{
						text: '1点法',
						value: 1
					},
					{
						text: '2点法',
						value: 2
					},
					{
						text: '3点法',
						value: 3
					},
					{
						text: '4点法',
						value: 4
					},
					{
						text: '5点法',
						value: 5
					},
					{
						text: '6点法',
						value: 6
					},
					{
						text: '7点法',
						value: 7
					},
					{
						text: '8点法',
						value: 8
					},
					{
						text: '9点法',
						value: 9
					},
				],
				range2: [{
						text: '1条测线',
						value: 1
					},
					{
						text: '2条测线',
						value: 2
					},
					{
						text: '3条测线',
						value: 3
					},
					{
						text: '4条测线',
						value: 4
					},
					{
						text: '5条测线',
						value: 5
					},
					{
						text: '6条测线',
						value: 6
					},
					{
						text: '7条测线',
						value: 7
					},
					{
						text: '8条测线',
						value: 8
					},
					{
						text: '9条测线',
						value: 9
					},
				],
				cexianlist: [],
				ceDianshuliang: 0,
				ceXiantiaoshu: 0,
				liusuyiList: [],
				areaAll: 0,
				channelArea: 0,
				bw: 0

			}
		},
		onLoad(option) {
			// 测站信息
			this.cezhanObj = this.vuex_cezhanInfo
			this.ceXiantiaoshu = this.cezhanObj.cexiantiaoshu
			this.ceDianshuliang = this.cezhanObj.morencefa
			
			
			// this.upyun(option.dianfa)
			this.change2(this.ceXiantiaoshu)
			
		},
		onShow() {
			//渠道底宽
			this.bw = this.cezhanObj.qudikuandu
			//流量系数
			this.qk = this.cezhanObj.qk
			//水深
			this.wD = this.cezhanObj.shejishuishen
		},
		methods: {
			// 选择测线
			change2(e) {
				this.listdata = []
				// this.ceDianshuliang = 0
				let arr = []
				for (let i = 0; i < e; i++) {
					this.listdata.push(arr)
				}
				this.change1(this.ceDianshuliang)
			},
			// 选择点数
			change1(e) {
				for (let y = 0; y < this.listdata.length; y++) {
					this.listdata[y] = []
					let arr = ['A','B','C']
					for (let i = 0; i < e; i++) {
						this.listdata[y][i] = {
							id: 1 + i,
							name: arr[i],
							input: '',
							aveTy: 0
						}
					}
				}
			},
			// 计算平均流速
			clijisu() {
				console.log('this.listdata',this.listdata);
				
				for (let i = 0; i < this.listdata.length; i++) {
					this.nuball = 0
					for (let y = 0; y < this.listdata[i].length; y++) {

						this.nuball += this.listdata[i][y].input * 1
						// this.arrnub.push(this.nuball)

					}

					this.listdata[i].aveTy = (this.nuball / this.listdata[i].length).toFixed(4)
				}
				
				this.liusuyiList = this.listdata
				this.listdata = null
				this.listdata = this.liusuyiList

			},
			// 计算流量
			calculateFlow() {
				this.cezhanObj.qudikuandu = this.bw
				this.cezhanObj.qk = this.qk
				this.clijisu()
				if (this.wD <= 0) {
					uni.showToast({
						icon: 'fail',
						title: '水深未输入',
						duration: 1500
					});
					return
				}
				let vls = this.liusuyiList
				let vlAll = []
				let vl0 = null
				let vl1 = null
				let vlz = null
				let vln = null
				let vln1 = null
				let vln2 = null

				// 不参与循环
				// cot
				let sin27LL = Math.sin(this.cezhanObj.lSA * Math.PI / 180)
				let cos27LL = Math.cos(this.cezhanObj.lSA * Math.PI / 180)
				let areaLL = cos27LL / sin27LL //三角面积L
				console.log('三角形面积LL', areaLL);

				let sin27RR = Math.sin(this.cezhanObj.rSA * Math.PI / 180)
				let cos27RR = Math.cos(this.cezhanObj.rSA * Math.PI / 180)
				let areaRR = cos27RR / sin27RR //三角面积R
				console.log('三角形面积RR', areaRR);
				// 面积
				this.areaAll = (areaLL * this.wD * this.wD) / 2 + (areaRR * this.wD * this.wD) / 2 + this.cezhanObj
					.qudikuandu * this.wD // 总面积

				// VL0
				vl0 = 0.5 * this.wD * this.wD * areaLL * (vls[0].aveTy * 1) * (this
					.cezhanObj.vmL * 1) * (this.cezhanObj.kL * 1)
				vlAll.push(vl0.toFixed(6) * 1) //四舍五入
				console.log('VL0', vl0.toFixed(6) * 1);

				//VL1
				vl1 = 0.5 * [(vls[0].aveTy * 1) * (this.cezhanObj.vmL * 1) + (vls[0].aveTy * 1) * (this.cezhanObj
					.cexianlist[0].vM * 1)] * (this.wD) * (this.cezhanObj.cexianlist[0].cR * 1)
				vlAll.push(vl1.toFixed(6) * 1) //四舍五入
				console.log('VL1', vl1.toFixed(6) * 1);

				// 中间逻辑
				if (vls.length > 1) {
					for (let i = 0; i < vls.length - 1; i++) {
						
						vlz = 0.5 * [(vls[i].aveTy * 1) * (this.cezhanObj.cexianlist[i].vM * 1) + (vls[i + 1].aveTy * 1) *
							(this.cezhanObj.cexianlist[i + 1].vM * 1)
						] * (this.wD) * [(this.cezhanObj.cexianlist[i + 1].cR * 1) - (this.cezhanObj.cexianlist[i].cR *
							1)]
						vlAll.push(vlz.toFixed(6) * 1) //四舍五入
					}
				}

				//VLN+1
				vln1 = 0.5 * [(vls[vls.length - 1].aveTy * 1) * (this.cezhanObj.vmR) + (vls[vls.length - 1]
					.aveTy * 1) * (this.cezhanObj.cexianlist[vls.length - 1].vM * 1)] * (this.wD) * [(this
					.cezhanObj.qudikuandu * 1) - (this.cezhanObj.cexianlist[vls.length - 1].cR * 1)]
				vlAll.push(vln1.toFixed(6) * 1) //四舍五入
				console.log('VLN+1', vln1.toFixed(6) * 1);

				//VLN+2
				vln2 = 0.5 * this.wD * this.wD * areaRR * (vls[vls.length - 1].aveTy * 1) * (this
					.cezhanObj.vmR * 1) * (this.cezhanObj.kR * 1)
				vlAll.push(vln2.toFixed(6) * 1) //四舍五入
				console.log('VLN+2', vln2.toFixed(6) * 1);

				console.log('数组vlAll', vlAll);
				// 计算总平均流速
				let vlQitem = []
				let vlQArr = []
				let vlQALL = []

				let sum = 0;
				for (let i = 0; i < vlAll.length; i++) {
					sum += vlAll[i];
				}
				this.liusliangnub = (sum * 1 * this.cezhanObj.qk).toFixed(6)
				console.log('面积', this.areaAll);
				this.channelArea = (this.liusliangnub / this.areaAll).toFixed(6)
				console.log('sum', sum.toFixed(6) * 1);
			}
		}
	}
</script>
<style scoped lang="scss">
	.coun {
		padding: 30rpx;

		.topitem {
			width: 650rpx;
			// height: 180rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 50rpx;
			border: #ffffff solid 2rpx;
			box-shadow: 10rpx 10rpx 20rpx 5rpx #dfe6f0;
			background-color: #f4f6f8;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.ite {
				// width: 160rpx;
				// line-height: 60rpx;
				// text-align: center;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				// background-color: #f0cfb9;
				.top {
					display: flex;
					align-items: center;
					margin: 5rpx 15rpx;
					font-size: 35rpx;
					color: #000000;
					// background-color: #b9f08b;
				}

				.bom {
					// width: 50rpx;
					// height: 50rpx;
					padding: 5rpx 10rpx 10rpx 15rpx;
					margin: 6rpx 10rpx;
					text-align: center;
					// line-height: 50rpx;
					font-size: 40rpx;
					border-radius: 20rpx;
					letter-spacing: 10rpx;
					color: #ffffff;
					background-color: #5a81c8;
				}

				.pjun {
					background-color: #75b9ac;
					border-bottom: 10rpx solid #60988d;
					color: #ffffff;
					font-size: 40rpx;
					margin: 5rpx 0;
					padding: 10rpx 20rpx;
					border-radius: 50rpx;
				}
			}

			.rite {
				width: 100rpx;
				line-height: 60rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.rt {
					width: 60rpx;
					height: 60rpx;
					font-size: 40rpx;
					text-align: center;
					color: #ffffff;
					border-radius: 100rpx;
					border: #fff solid 2rpx;
					background-color: #ff9727;
					box-shadow: 5rpx 5rpx 20rpx #ffaf69;

				}

				.rb {
					font-size: 30rpx;
					color: #747a83;
				}
			}
		}

	}

	.liusliang {
		font-family: 'MyFont';
		// background-color: #e6f2f4;
		border: #fff solid 2rpx;
		padding: 20rpx 0 0 20rpx;
		margin-bottom: 20rpx;
		font-size: 40rpx;
		color: #43777c;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx 5rpx #dfe6f0;
		display: flex;
		align-items: center;

		// justify-content: center;
		.text {
			font-size: 80rpx;
		}
	}

	.shuiinput {
		display: flex;
		align-items: center;
		height: 120rpx;
		// justify-content: center;
		border: #fff solid 2rpx;
		padding-left: 20rpx;
		margin-bottom: 20rpx;
		font-size: 40rpx;
		color: #43777c;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx 5rpx #dfe6f0;
	}

	.czinput {
		color: #43777c;
		font-size: 40rpx;
		padding: 20rpx 20rpx;
		// color: #2dbfae;
		display: flex;
		align-items: center;
		// background-color: #ffffff;
		border-bottom: 1rpx solid #e8e8e8;
		border-radius: 0rpx;
		margin-bottom: 20rpx;

		.lebox {
			width: 250rpx;
			// background-color: #ffaaff;
		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #f4f6f8;
	}
</style>